<template>
	<view class="sameName" v-if="showName">
		<view class="layer">
			<view class="layerMain">
				<view class="flex alignCenter justConBetween font14 oper">
					<view class="" @click="showName=false">不更换</view>
					<view class="colorMain" @click="clickSure">确认更换</view>
				</view>
				<view class="font14 mainScroll">
					<view :class="name.choose?'nameItem colorMain':'nameItem'" v-for="(name,index) in nameArr" :key="index" @click="chooseNameClick(name)">{{name.title}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			nameArr:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
				showName:false
			};
		},
		methods:{
			show(){
				this.showName=true
			},
			chooseNameClick(name){
				this.nameArr.forEach((item)=>{
					item.choose=false
				})
				name.choose=true
			},
			clickSure(){
				let chooseName=this.nameArr.filter((val)=>val.choose)
				if(chooseName.length==0){
					uni.showToast({
						title:'请先选择一个名字',
						icon:'none'
					})
					return
				}
				this.showName=false
				this.$emit('nameSureClick',chooseName[0])
			}
		}
	}
</script>

<style lang="scss" scoped>
.sameName{
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height:100%;
	.layer{
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .3);
	}
	.layerMain{
		background: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		border-radius: 32rpx 32rpx 0 0;
		padding: 30rpx 0 0;
		box-sizing: border-box;
		.oper{
			// margin:0 0 60rpx;
			padding: 0 40rpx 30rpx;
			border-bottom: 1px solid #F8F9FC;
		}
		.mainScroll{
			max-height:600rpx;
			// height: 600rpx;
			overflow-y: scroll;
			&>view{
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				text-align: center;
			}
		}
	}
}
</style>
